<template>
  <div class="summaryItem">
    <span>
      {{ item.name }}
      <iconHelp :title="item.name" />
    </span>
    <span>{{ item.value }}</span>
    <span v-if="item.status && item.status.title">
      相较上月
      <span>{{ item.status.title }}%</span>
      <el-icon v-if="item.status.isRise" style="color: red"><Top /></el-icon>
      <el-icon v-else style="color: #3bba3b"><Bottom /></el-icon>
    </span>
  </div>
</template>
<script lang="ts" setup>
  import { Top, Bottom } from '@element-plus/icons-vue'
  import iconHelp from '../../components/icon-help/index.vue'
  const props = defineProps({
    item: {
      type: Object,
      require: true,
      default() {
        return {}
      },
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
  })
</script>
<style lang="scss" scoped>
  .summaryItem {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    cursor: pointer;
    span {
      margin-bottom: 14px;
    }
    span:nth-child(2) {
      font-size: 18px;
      font-weight: 700;
    }
    span:nth-child(3) {
      font-weight: 700;
      color: #999999;
      span {
        font-weight: 400;
      }
      i {
        padding-top: 2px;
        box-sizing: border-box;
      }
    }
  }
</style>
